<template>
  <view class="u-flex custom-tabbar">
    <view class="tabbar-bg with-hole"></view>

    <!-- 首页 -->
    <view class="u-flex-1 tab-area left" @tap="switchTab(0)">
      <view class="tab-icon" :class="{ active: current === 0 }">首页</view>
    </view>

    <!-- 救援（凸起） -->
    <view class="tab-area center" @tap="switchTab(1)">
      <view class="center-circle" :class="{ active: current === 1 }">
        <view class="center-icon">救援</view>
      </view>
    </view>

    <!-- 我的 -->
    <view class="u-flex-1 tab-area right" @tap="switchTab(2)">
      <view class="tab-icon" :class="{ active: current === 2 }">我的</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0   // 默认选中首页
    }
  },
  methods: {
    switchTab(i) {
      this.current = i
      const url = ['/pages/index/index', '/pages/help/jump-start', '/pages/my/my'][i]
      uni.switchTab({ url })
    }
  }
}
</script>

<style scoped>
/* 工具类 */
.u-flex { display: flex; align-items: center; }
.u-flex-1 { flex: 1; }

/* 整体容器 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  background: transparent;
  z-index: 999;
}

/* 背景白条 + 凹陷 mask */
.tabbar-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: #ffffff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 0;
  pointer-events: none;
}
.with-hole {
  -webkit-mask-image: radial-gradient(30px 30px at 50% 0, transparent 29px, #000 30px);
  mask-image: radial-gradient(30px 30px at 50% 0, transparent 29px, #000 30px);
}

/* 三个点击区域 */
.tab-area {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.left  { padding-right: 15px; }
.right { padding-left: 15px; }

/* 中间区域 */
.center {
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中间凸起圆 */
.center-circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;                 /* 再抬高一点 */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.center-circle.active {
  transform: translateX(-50%) scale(1.1);
}

/* 文字样式 */
.tab-icon {
  font-size: 14px;
  color: #666;
  transition: color 0.2s;
}
.tab-icon.active {
  color: #ff3b30;
  font-weight: bold;
}

.center-icon {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
</style>